<template>
  <div class="banner_bottom">
    <div class="bottom flex">
      <div class="textBox flex">
        <span class="mess"></span>
        <transition name="slide">
          <p class="text" :key="text.id">{{text.val}}</p>
        </transition>
      </div>
      <div class="textBox flex flex_start lineH">
        <div>
          <el-select v-model="value" placeholder="请选择" size="small" style="width:105px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-input v-model="input" placeholder="搜索输入项目或公告" size="small" style="width:180px;margin-left: -1px;"></el-input>
        </div>
        <div >
          <el-button type="danger" size="small" @click="searchMethod">搜索</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    activIndex:0
  },
  data() {
    return {
      textArr: [
        "杭州产权交易所召开2019年年中工作会议并学习传达集团年中会议精神",
        "杭州产权交易所召开2019年年中工作会议",
        "杭州产权交易所召开2019年并学习传达集团年中会议精神"
      ],
      options: [
        {
          value: "1",
          label: "产权转让"
        },
        {
          value: "2",
          label: "企业增资"
        },
        {
          value: "3",
          label: "资产转让"
        },
        {
          value: "4",
          label: "房屋租赁"
        },
        {
          value: "5",
          label: "招商"
        }
      ],
      value: "1",
      input: "",
      number: 0
    };
  },
  computed: {
    text() {
      return {
        id: this.number,
        val: this.textArr[this.number]
      };
    }
  },
  mounted() {
    this.startMove();
  },
  methods: {
    searchMethod(){
      if(this.input != ""){
        this.$router.push({name: 'search',query: {name: this.input,type:this.value,index:this.activIndex||0}})
      }else{
        this.$message({
          message: '请填写搜索内容',
          type: 'warning'
        });           
      }
    },
    startMove() {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    }
  }
};
</script>

<style lang="scss" scoped>
.banner_bottom {
  height: 50px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.mess {
  width: 25px;
  height: 50px;
  background: url("../../src/components/static/img/mess.png") no-repeat center /
    100% auto;
  display: inline-block;
}
.bottom {
  width: 1200px;
  margin: 0 auto;
}
.textBox /deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #ffffff;
  border-radius: 0px;
}
.textBox /deep/ .el-button--small {
  height: 32px;
  padding: 9.5px 15px;
  border-radius: 0px;
}
.textBox /deep/ .el-button--danger {
  background-color: #db1004;
  border-color: #db1004;
}
.textBox {
  width: 50%;
  height: 50px;
  /* margin: 0 auto; */
  overflow: hidden;
  position: relative;
  text-align: center;
}
.textBox .text {
  width: 80%;
  margin-left: 50px;
  position: absolute;
  bottom: 16px;
  color: #ffffff;
  text-align: left;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter {
  transform: translateY(20px) scale(1);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
}
.lineH {
  width: 345px;
}
.lineH > div {
  line-height: 50px;
}
</style>